<template>
    <div class="read f f-ac f-jc">
        <div class="read-body">
            <Sub-title label="读好书" padding="35px 0 10px" />
            <Type-btn :list="typeList" :current="current" key-value="id" top="30" row-gap="25" @click="handleType" />
            <div class="f f-ac f-jb read-box" v-if="dataList.length > 0">
                <div class="f-4 read-left" @click="handleDetail(dataList[0])">
                    <img :src="baseUrl+dataList[0].image" />
                    <div class="read-left-title line-1">{{ dataList[0].title || "-" }}</div>
                    <div class="read-left-content " style="height: 236px; display: -webkit-box;text-overflow: ellipsis;" v-html="dataList[0].msg" />
                </div>
                <div class="f-6 read-right">
                    <div v-for="(i, k) in dataList.slice(1, dataList.length)" :key="k" class="read-item f f-ac f-jb"
                        @click="handleDetail(i)">
                        <img :src="baseUrl+i.image" />
                        <div class="f-1">
                            <div class="read-item-title line-1">{{ i.title || "-" }}</div>
                            <div class="read-item-content line-2" v-html="i.msg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        bookCategory,
        bookHome,
        bookList
    } from "@/utils/book/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                current: "", //当前选中
                typeList: [{
                    id: '',
                    name: '最新'
                }, {
                    id: 'like',
                    name: '最热'
                }],
                dataList: [],
            };
        },

        mounted() {},
        created() {
            // this.getTypeList();
            this.getList();
        },
        methods: {
            // 获取读好书列表
            getList() {
                let that = this
                let data = {
                    title: '',
                    book_category_id: '',
                    page: 1,
                    limit: 5,
                    recommend: '',
                    type: that.current
                }
                bookList(data).then((response) => {
                    that.dataList = response.data.list
                    // console.log(that.dataList, 'red')
                });
            },
            // 获取读好书分类
            getTypeList() {
                let that = this
                bookCategory().then((response) => {
                    that.typeList = response.data.data
                    that.current = that.typeList[0].id
                });
            },
            // 点击按钮
            handleType(i) {
                this.current = i.id;
                this.getList();
            },
            // 查看详情
            handleDetail(v) {
                this.$router.push({
                    path: "/readBook/details",
                    query: {
                        id: v.id,
                    },
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .read {
        width: 100%;
        height: 720px;
        /* background-color: #f5f5f5; */

        &-body {
            width: 1200px;
            height: 100%;

            .read-box {
                height: 526px;
                width: 100%;

                .read-left {
                    height: 100%;
                    background-color: #fff;
                    margin-right: 20px;
                    cursor: pointer;

                    img {
                        width: 100%;
                        height: 215px;
                    }

                    &-title {
                        width: 472px;
                        padding: 15px 10px 0;
                        font-size: 20px;
                        color: #313131;
                        box-sizing: border-box;
                    }

                    &-content {
                        color: #909090;
                        font-size: 14px;
                        padding: 10px;
                        letter-spacing: 1px;
                        overflow: hidden;
                    }
                }

                .read-right {
                    height: 100%;

                    .read-item {
                        background-color: #fff;
                        height: 117px;
                        width: 100%;
                        margin-bottom: 20px;
                        overflow: hidden;
                        cursor: pointer;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        img {
                            width: 211px;
                            height: 100%;
                            margin-right: 28px;
                        }

                        .f-1 {
                            height: 100%;
                        }

                        &-title {
                            color: #313131;
                            font-size: 16px;
                            margin: 17px 10px 15px 0;
                        }

                        &-content {
                            color: #909090;
                            font-size: 16px;
                            margin-right: 10px;
                            line-height: 23px;
                        }
                    }
                }
            }
        }
    }
</style>